import * as React from "react"
import { observer, inject } from "mobx-react"
import {
  View,
  Text,
  ViewStyle,
  Image,
  TouchableWithoutFeedback,
  TextStyle,
  ImageStyle,
  ScrollView
} from "react-native"
import { Tabs } from "@ant-design/react-native"
import { px2dp } from "../../utils"
import { images } from "../../assets"
import { LoginHeader } from "../../components/login-header"
import { Input } from "../../components/input"
import { Button } from "../../components/button/button"

export interface LoginScreenProps {
  rootStore: any
  history?: any
}

const styledContainer: ViewStyle = {
  marginTop: px2dp(40),
  marginLeft: px2dp(32),
  marginRight: px2dp(32)
}

const styledLoginContainer: ViewStyle = {
  marginLeft: px2dp(32),
  marginRight: px2dp(32)
}

const styledRemember: ViewStyle = {
  marginTop: px2dp(16),
  flexDirection: "row",
  justifyContent: "space-between"
}

const styledRememberPsw: ViewStyle = {
  flexDirection: "row"
}

const styledRememberPswText: TextStyle = {
  marginLeft: px2dp(8),
  color: "#5d6c76"
}

const styledForget: TextStyle = {
  color: "#121317"
}

const styledLogin: ViewStyle = {
  marginTop: px2dp(40),
  height: px2dp(50),
  borderRadius: px2dp(6),
  backgroundColor: "#0149ff"
}

const styledLoginText: TextStyle = {
  color: "#fff",
  fontSize: px2dp(18)
}

const styledRegister: ViewStyle = {
  marginTop: px2dp(24),
  height: px2dp(50),
  borderWidth: px2dp(1),
  borderStyle: "solid",
  borderColor: "#0149ff",
  backgroundColor: "#fff",
  borderRadius: px2dp(6)
}

const styledRegisterText: TextStyle = {
  color: "#0149ff",
  fontSize: px2dp(18)
}

const styledPopShutDown: ImageStyle = {
  position: "absolute",
  width: px2dp(20),
  height: px2dp(20)
}

const styledHeaderBgContent: ViewStyle = {
  alignItems: "center",
  justifyContent: "center"
}

const styledBallBet: ImageStyle = {}

const styledSponsor: ImageStyle = {
  marginTop: px2dp(26)
}

function LoginHeaderBg() {
  return (
    <View>
      <Image style={styledPopShutDown} source={images.login.icons.pageShutDown2} />
      <View style={styledHeaderBgContent}>
        <Image style={styledBallBet} source={images.login.ballbet} />
        <Image style={styledSponsor} source={images.login.sponsor} />
      </View>
    </View>
  )
}

@inject("rootStore")
@observer
export default class LoginScreen extends React.Component<LoginScreenProps, {}> {
  render() {
    const { loginStore } = this.props.rootStore
    const tabs = [{ title: "账号密码登录" }, { title: "手机验证码登录" }]
    return (
      <ScrollView style={{ flex: 1 }}>
        <LoginHeader height={px2dp(212)} component={<LoginHeaderBg />} />
        <Tabs tabs={tabs}>
          <View style={styledContainer}>
            <Input
              leftImage={images.login.icons.logInUser}
              placeholder={"请输入您的用户名"}
              value={loginStore.username}
              onChangeText={text => loginStore.usernameOnChange(text)}
              isOpenClear={loginStore.usernameIsOpenClear}
              clear={() => loginStore.usernameClear()}
            />
            <Input
              isPassword
              isPasswordOpen={loginStore.isPasswordOpen}
              leftImage={images.login.icons.password}
              placeholder={"请输入您的密码"}
              value={loginStore.password}
              onChangeText={text => loginStore.passwordOnChange(text)}
              isOpenClear={loginStore.passwordIsOpenClear}
              clear={() => loginStore.passwordClear()}
              changePasswordStyle={() => loginStore.changePasswordStyle()}
            />
            <View style={styledRemember}>
              <TouchableWithoutFeedback onPress={() => loginStore.rememberPswChange()}>
                <View style={styledRememberPsw}>
                  {loginStore.rememberPswCheck ? (
                    <Image source={images.login.icons.rememberPswCheck} />
                  ) : (
                    <Image source={images.login.icons.rememberPswUnCheck} />
                  )}
                  <Text style={styledRememberPswText}>记住密码</Text>
                </View>
              </TouchableWithoutFeedback>
              <Text style={styledForget}>忘记密码</Text>
            </View>
          </View>
          <View style={styledContainer}>
            <Input
              leftImage={images.login.icons.logInMobile}
              placeholder={"请输入您的手机号/用户名"}
              value={loginStore.mobile}
              onChangeText={text => loginStore.mobileOnChange(text)}
              isOpenClear={loginStore.mobileIsOpenClear}
              clear={() => loginStore.mobileClear()}
            />
            <Input
              isMsgInput
              msgCodeText={"发送验证码"}
              leftImage={images.login.icons.logInVertify}
              placeholder={"输入您的验证码"}
              value={loginStore.mobile}
              onChangeText={text => loginStore.mobileOnChange(text)}
              isOpenClear={loginStore.mobileIsOpenClear}
              clear={() => loginStore.mobileClear()}
            />
          </View>
        </Tabs>
        <View style={styledLoginContainer}>
          <Button
            style={styledLogin}
            onPress={() => loginStore.login(this.props.history, this.props.rootStore)}
          >
            <Text style={styledLoginText}>登录</Text>
          </Button>
          <Button style={styledRegister}>
            <Text style={styledRegisterText}>注册</Text>
          </Button>
        </View>
      </ScrollView>
    )
  }
}
